<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>创建旅游攻略</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    #admin dl{z-index:99999}
  </style>
</head>
<body>
<div style="margin-top: 20px;">
</div>
<form class="layui-form" id="admin">


  <div class="layui-form-item">
    <label class="layui-form-label">供应商</label>
    <div class="layui-input-block" style="max-width:600px;">
      <select lay-search="" lay-verify="required" name="supplier_admin_id" id="" class="layui-select">
        <option value="">请选择供应商</option>
        {notempty name="$supplier_admins"}
        {volist name="supplier_admins" id="vo"}
        <option value="{$vo.supplier_admin_id}" {if $article.supplier_admin_id==$vo.supplier_admin_id}selected{/if}>{$vo.supplier_name}</option>
        {/volist}
        {/notempty}
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">分类</label>
    <div class="layui-input-block" style="max-width:600px;">
      <select lay-search="" lay-verify="required" name="category" id="" class="layui-select">
        <option value="">请选择分类</option>
        {notempty name="$category"}
        {volist name="$category" id="vo"}getStandardInfoByBuyers
        <option value="{$vo}" {if $article.category==$vo}selected{/if}>{$key}</option>
        {/volist}
        {/notempty}
      </select>
      <div class="layui-inline" style="color:#999">提示：全域导览主要包含景区概况，旅行宝典主要具体游玩攻略</div>
    </div>

  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block" style="max-width:600px;">
      <input name="title" maxlength="255" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" type="text" value="{notempty name='$article.title'}{$article.title}{/notempty}">
    </div>
  </div>


  <!--<div class="layui-form-item">-->
    <!--<label class="layui-form-label">标签</label>-->
    <!--<div class="layui-input-block" style="max-width:600px;">-->
      <!--<input name="tags" maxlength="255" autocomplete="off" placeholder="标签之间用,隔开" class="layui-input" type="text" value="{notempty name='$article.tags'}{$article.tags}{/notempty}">-->
    <!--</div>-->
  <!--</div>-->

  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">关联POI</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <select id="select_poi" lay-filter="select_poi" lay-search>
          <option value="">请选择</option>
          {volist name="poilist" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
      </div>
      <span id="add_poi" data-name="" data-id="" class="layui-btn layui-btn-danger layui-btn-sm" style="margin-top: 4px">添加</span>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">已选POI</label>
      <div class="layui-input-inline" style="width: 500px" id="selected_poi_name">
        {if !empty($article.poies)}
        {volist name='article.poies' id='v'}
        <span class="layui-btn layui-btn-sm layui-btn-normal del_selected_poi" data-id="{$v.id}" style="margin: 5px 10px">{$v.name}<i class="layui-icon"></i></span>
        {/volist}
        {/if}
      </div>
    </div>
    <input name="link_poi_ids" id="selected_poi_ids" value="{notempty name='$article.link_poi_ids'}{$article.link_poi_ids}{/notempty}" type="hidden">
  </div>
  <!---->
  <!--<div class="layui-form-item layui-form-text">-->
    <!--<label class="layui-form-label">描述</label>-->
    <!--<div class="layui-input-block" style="max-width:600px;">-->
      <!--<textarea placeholder="请输入内容" maxlength="255" class="layui-textarea" name="description">{notempty name="$article.description"}{$article.description}{/notempty}</textarea>-->
    <!--</div>-->
  <!--</div>-->


  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block" style="max-width:1000px;">
      <textarea placeholder="请输入内容" class="layui-textarea" name="content" id="content" style="border:0;padding:0">{notempty name="$article.content"}{$article.content}{/notempty}</textarea>
    </div>
  </div>

  <!--权重排序-->
  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">权重</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <input type="text" value="{$article.sort_num|default=0}" name="sort_num" class="layui-input">
      </div>
    </div>
  </div>

  <!--权重排序-->
  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">虚拟阅读量</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <input type="text" value="{$article.fake_browse|default=0}" name="fake_browse" class="layui-input">
      </div>
    </div>
  </div>

  <!--权重排序-->
  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">真实阅读量</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <input type="text" readonly="" value="{$article.browse|default=0}" class="layui-input">
      </div>
    </div>
  </div>

  {notempty name="$article"}
  <input type="hidden" name="id" value="{$article.id}">
  {/notempty}

  <div class="layui-upload" id="upload-thumb">
    <label class="layui-form-label">缩略图</label>
    <button type="button" class="layui-btn" id="thumb">上传图片</button>
    <div class="layui-upload-list">
      <label class="layui-form-label"></label>
      <img class="layui-upload-img" id="demo1" width="150" height="150" {notempty name="$article.cover_img"}src="{$article.cover_img}"{/notempty}>
      {notempty name="$article.cover_img"}<input type="hidden" name="cover_img" value="{$article.cover_img}">{/notempty}
      <p id="demoText"></p>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

</form>


<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['upload','layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            upload = layui.upload,
            form = layui.form;
        //执行实例
        var uploadInst = upload.render({
            elem: '#thumb' //绑定元素
            ,url: "{:url('common/upload')}" //上传接口
            ,data:{use:'article_thumb'}
            ,accept: 'images'
            ,done: function(res){
                //上传完毕回调
                layer.closeAll('loading');
                if(res.code == 2) {
                    $('#demo1').attr('src',res.src);
                    $('#upload-thumb').append('<input type="hidden" name="cover_img" value="'+ res.src +'">');
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                //演示失败状态，并实现重传
                layer.closeAll('loading');
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            ,before:function () {
                layer.load(2);
            }
        });
        $(window).on('load', function() {
            form.on('submit(admin)', function(data) {
                $.ajax({
                    url:"{:url('admin/travelguides/update_guide_ajax')}",
                    data:$('#admin').serialize(),
                    type:'post',
                    async: false,
                    success:function(res) {
                        if(res.code == 1) {
                            layer.msg(res.msg);
                            setTimeout(function(){
                                location.href = res.url;
                            },1000)
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                })
                return false;
            });

            //POI选择
            form.on('select(select_poi)', function (data) {
                var poiid = data.value;
                console.log(data)
                $("#add_poi").attr("data-id", poiid);
                $("#add_poi").attr("data-name", $(this).text());
            });
            $("#add_poi").on("click", function () {
                var poiid = $(this).attr("data-id");
                if(poiid==""){
                    layer.msg('请选择POI');
                    return false;
                }
                var poi_ids = $("#selected_poi_ids").val();
                var select_poi_ids = [];
                if (poi_ids!='' && poi_ids!=undefined){
                    select_poi_ids = poi_ids.split(",");
                    if ($.inArray(poiid,select_poi_ids)>-1) {
                        layer.msg("不能重复添加POI");
                        return false;
                    }
                }
                select_poi_ids.push(poiid);
                poi_ids = select_poi_ids.join();
                var poiname = $(this).attr('data-name');
                var poispan = '<span class="layui-btn layui-btn-sm layui-btn-normal del_selected_poi" data-id="' + poiid + '" style="margin: 5px 10px">' + poiname + '<i class="layui-icon"></i></span>';
                $("#selected_poi_name").append(poispan);
                $("#selected_poi_ids").val(poi_ids);
            });
            $(document).on("click", '.del_selected_poi', function () {
                var dataid = $(this).attr("data-id");
                var tripids = $("#selected_poi_ids").val();
                var ids = tripids.split(",");
                var newid = "";
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i] && dataid != ids[i]) {
                        if (!newid) {
                            newid += ids[i];
                        } else {
                            newid += "," + ids[i];
                        }
                    }
                }
                $("#selected_poi_ids").val(newid);
                $(this).remove();
            });
        });

    });
</script>

<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('content');
    UE.getEditor('content').addListener('afterpaste', replaceWxImageUrl);
    function replaceWxImageUrl(o, html) {
        var str = UE.getEditor('content').getContent();
        str = replaceWxImageFunc(str);
        str = removeRepeatSection(str);
        UE.getEditor('content').setContent(str);
        UE.getEditor('content').focus(true);
    }
    function replaceWxImageFunc(str)
    {
        var reg_URL = 'https://www.kuaibangxing.com/transition\\?img=';
        var URL= 'https://www.kuaibangxing.com/transition?img=';
        str = str.replace(RegExp(reg_URL, 'g'),'');
        str = str.replace(RegExp('http://mmbiz.qpic.cn/', 'g'),URL + 'http://mmbiz.qpic.cn/');
        str = str.replace(RegExp('https://mmbiz.qpic.cn/', 'g'),URL + 'https://mmbiz.qpic.cn/');
        return str;
    }
    function removeRepeatSection(str)
    {
        return str.replace(/(<section>|<\/section>)\1{1,}/g,'$1');
    }
</script>
</body>
</html>
